<template>
	<view>
		<hx-navbar  :border="false" :fixed="true" 
			  height="140rpx">
			<view style="text-align: left;width: 100%;font-weight: 700;"><text>领券中心</text></view>
			
		</hx-navbar>
		<view style="background: #fff, #FFFFFF;;height:140rpx;width: 100%;position: fixed;top: 0;"></view>
		<image src="/static/me/bgtop .png" mode="widthFix" class="bgtop"></image>
		<view class="select" >
			<image src="/static/me/whitedot.png"></image>
			<u-select v-model="showSchool" :list="listSelect" @confirm="confirm"></u-select>
			<u-tag :text="SchoolName" type="error" @click="openSelect()"></u-tag>
			<view class="remark">30栋</view>
		</view>
		<view class="container">
			<view class="get">
				<image class="tit" src="/static/me/coupon/tit1.png" mode="widthFix"></image>
				<image class="card" src="/static/me/coupon/card1.png" mode="widthFix"></image>
			</view>
			<view class="get">
				<image class="tit" src="/static/me/coupon/tit2.png" mode="widthFix"></image>
				<image class="card" src="/static/me/coupon/card2.png" mode="widthFix"></image>
			</view>
			<view>
				<image class="tit" src="/static/me/coupon/tit3.png" style="width: 46%;margin-left: 27%;" mode="widthFix"></image>
				<!-- 商家门店 -->
				<view class="store-box">
					<view class="item-box" v-for="(store, i) in storeList" :key="i"
						@click="toStore(store.data.store_id, store.data.isstart, store.data.delivery, 1)"
						v-if="store.data.isstart && store.data.isban">
						<view class="top-box">
							<view class="left">
								<image :src="store.data.avatar" mode="aspectFill"></image>
								<view>可用优惠</view>
							</view>
							<view class="right">
								<view style="display: flex;align-items: center;justify-content: space-between;">
									<text class="tit margin-right-sm"
										style="margin-left: 2rpx;">{{ store.data.name }}</text>
									<u-icon name="arrow-right" color="#B0B0B0" size="20"></u-icon>	
									<!-- <view v-if="store.data.type == 0"></view>
									<view v-if="store.data.type == 1" class="mark-tag bg-gradual-orange text-white">人气</view>
									<view v-if="store.data.type == 2" class="mark-tag bg-gradual-orange text-white">上新
									</view>
									<view v-if="store.data.type == 3" class="mark-tag bg-gradual-orange text-white">促销
									</view> -->
								
								</view>
								<view class="row justify-content">
									<view class="row-left" style="display: flex; align-items: center;">
										<!-- <i class="hxicon-locationfill" style="margin-top: 2rpx;"></i> -->
										<text v-if="store.data.address">{{ store.data.address }}</text>
										<text v-if="store.data.starting_price">起送￥{{ store.data.starting_price }}</text>
										<!-- <text class="t2">月售{{store.data.monthly_sales}}</text> -->
									</view>
								</view>
								<view class="row rowTags">
				
									<view class="t2" v-if="store.data.delivery != 3">配送上楼￥1.0</view>
									<view class="t2" v-else>免费配送上楼</view>
									<view v-if="store.data.isNew">新客立减{{store.data.newMoney}}元</view>
								</view>
							</view>
						</view>
						<view class="bottom-box" v-if="store.data.newgoods">
							<view class="bottom-box-container" style="display: flex; flex-direction: column;">
								<scroll-view scroll-x="true">
									<view class="goods-box" v-for="(goods, j) in store.data.newgoods" :key="j">
										<view class="img-box">
											<image :src="goods.main_pic" mode="aspectFill">
												<view class="tit">{{ goods.name }}</view>
											</image>
										</view>
				
										<view class="price-box">
											<text class="txt1">￥</text>
											<text class="txt2">{{ goods.price }}</text>
											<text class="txt3">￥{{ goods.oldprice }}</text>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="avatarbox">
							<view class="left">
								<block v-for="item in avatars">
									<image :src="item.src" mode="widthFix"></image>
								</block>
							</view>
							<view class="right"><view>1406</view>位同学已上车</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//数据库引入
	const db = uniCloud.database();
	const dbCmd = db.command;
	//引入全局变量
	let app = getApp();
	export default{
		data(){
			return{
				showSchool: false,
				listSelect: [{
						value: '0',
						label: '中南大学南校区',
						timelist: [{
								starttime: '11:00~11:20',
								endtime: '最晚10:30关闭'
							}, {
								starttime: '11:20~11:40',
								endtime: '最晚10:50关闭'
							},
							{
								starttime: '11:40~12:00',
								endtime: '最晚11:10关闭'
							},
							{
								starttime: '12:00~12:20',
								endtime: '最晚11:30关闭'
							},
							{
								starttime: '12:20~12:40',
								endtime: '最晚11:50关闭'
							},
							{
								starttime: '12:40~13:00',
								endtime: '最晚12:20关闭'
							},
							{
								starttime: '17:00~17:20',
								endtime: '最晚16:30关闭'
							},
							{
								starttime: '17:20~17:40',
								endtime: '最晚16:50关闭'
							},
							{
								starttime: '17:40~18:00',
								endtime: '最晚17:10关闭'
							},
							{
								starttime: '18:00~18:20',
								endtime: '最晚17:50关闭'
							},
							{
								starttime: '18:20~18:40',
								endtime: '最晚18:10关闭'
							},
							{
								starttime: '18:40~19:00',
								endtime: '最晚18:20关闭'
							},
							{
								starttime: '22:20~22:45',
								endtime: '最晚21:40关闭'
							}
						],
						bannerData: [{
								page: '/pages/huoma/huoma',
								src: '../../static/index/shouye.png'
							},
							{
								page: '/pages/huoma/huoma',
								src: '../../static/index/shouye.png'
							},
							{
								page: '/pages/store/index?sid=16680806912&delivery=1&sign=4',
								src: '../../static/index/kuaidi.png'
							}
						]
					},
					{
						value: '1',
						label: "中南大学本部校区",
						timelist: [{
								starttime: '11:45~12:05',
								endtime: '最晚11:10关闭'
							}, {
								starttime: '12:25~12:45',
								endtime: '最晚11:50关闭'
							},
							{
								starttime: '17:45~18:05',
								endtime: '最晚17:10关闭'
							}, {
								starttime: '18:25~18:45',
								endtime: '最晚17:50关闭'
							},
						],
						bannerData: [{
							page: '/pages/huoma/huoma',
							src: '../../static/index/shouye.png'
						}]
					},
					{
						value: '2',
						label: "湖南大学财经校区",
						timelist: [{
								starttime: '11:05~11:25',
								endtime: '最晚10:30关闭'
							},
							{
								starttime: '11:45~12:05',
								endtime: '最晚11:10关闭'
							}, {
								starttime: '12:25~12:45',
								endtime: '最晚11:50关闭'
							},
							{
								starttime: '17:05~17:25',
								endtime: '最晚16:30关闭'
							},
							{
								starttime: '17:45~18:05',
								endtime: '最晚17:10关闭'
							}, {
								starttime: '18:25~18:45',
								endtime: '最晚17:50关闭'
							},
						],
						bannerData: [{
							page: '/pages/newhuoma/newhuoma?schoolIndex=2',
							src: '../../static/index/hudaindex.png'
						}]
					}
					// ,
					// {
					// 	value:'2',
					// 	label:"湖南大学财经校区"
					// }
				],
				SchoolName: '请选择校区',
				storeList: [],
				currentTag: 0,
				page:1,
				avatars:[
					{src:'/static/me/coupon/default.png'},
					{src:'/static/me/coupon/default.png'},
					{src:'/static/me/coupon/default.png'},
					{src:'/static/me/coupon/default.png'},
					{src:'/static/me/coupon/default.png'},
				]
			}
		},
		methods:{
			openSelect() {
				console.log(1)
				this.showSchool = true;
			},
			select(index) {
				this.showSchool = false;
				this.schoolIndex = index;
				uni.showToast({
					title: '您已选择' + this.imgList[index].title
				});
			},
			//选择完校区后进行数据的更新
			confirm(e) {
				let that = this
				this.schoolIndex = parseInt(e[0].value)
				console.log("选择schoolIndex", this.schoolIndex)
				this.SchoolName = e[0].label
				console.log("hhhhhhhhhh", this.listSelect[this.schoolIndex].bannerData[0])
				// 保证本部的店铺可以，但是请求的时候还是要传进去0
				this.getstoreList(this.schoolIndex)
				this.page=1
				app.globalData.schoolIndex = this.schoolIndex
				uni.setStorage({
					key: 'school_sxz',
					data: {
						schoolIndex: that.schoolIndex,
						SchoolName: that.SchoolName
					},
					success(res) {
						uni.showToast({
							title: that.SchoolName
						})
					},
					fail() {
			
					}
				});
			},
			// 加载商家店铺
			getstoreList(schoolIndex) {
				//下拉刷新商家
				let that = this;
				uni.showLoading({
					title: '加载中'
				});
				if (schoolIndex == 1 || schoolIndex == 0) {
					var school = 0
				} else {
					//直接进入请求校区店铺
					var school = 1
				}
					db.collection('deliverytime')
						.where({
							'data.iskai': true
						})
						.get()
						.then(res => {
							console.log('res次数', res.result.data.length);
							//加载全部商家店铺【按排名】
							db.collection('storeList')
								.where({
									'data.isban': true,
									'data.school': school
								})
								.orderBy('data.id')
								.limit(10)
								.get({})
								.then(res => {
									console.log('商家店铺列表', res);
									// that.navTag[that.currentTag].storeList = res.result.data;
									// that.storeList = that.navTag[that.currentTag].storeList;
									that.storeList = res.result.data
									uni.hideLoading();
								})
								.catch(err => {});
						});
				
			},
			toStore(id, isstart, delivery, sign) {
				let that = this;
				let parameter = `?sid=${id}` + '&delivery=' + delivery + '&sign=' + sign + '&school=' + this.schoolIndex;
				//平台暂不开放
				// if(that.super){
			
				// }else{
				// 	that.$refs.uToast.show({
				// 		title: '非常抱歉，目前平台定于9月6号早上8点正式开始营业，我们不见不散！',
				// 		type: 'error'
				// 	});
				// 	return
				// }
				if (!isstart) {
					that.$refs.uToast.show({
						title: '该店铺的营业时间已经关闭！',
						type: 'error'
					});
				} else {
					uni.navigateTo({
						url: '/pages/store/index' + parameter
					});
				}
			},
		},
		// 下拉触底
		onReachBottom() {
			let that = this;
			if (this.schoolIndex == -1) {
				uni.showModal({
					title: "请选择校区"
				})
				return
			}
			if (this.schoolIndex == 1 || this.schoolIndex == 0) {
				var school = 0
			} else if ((this.schoolIndex == 2)) {
				//直接进入请求校区店铺
				var school = 1
			}
			
				console.log('触底啦！');
				uni.showLoading({
					title: '正在加载店铺'
				});
					console.log('进来啦！');
		
					//加载商家店铺
					db.collection('storeList')
						.where({
							'data.isban': true,
							'data.school': school
						})
						.orderBy('data.id')
						.skip(that.page * 10)
						.limit(10)
						.get({})
						.then(res => {
							uni.hideLoading();
							console.log('商家店铺列表', res.result.data);
							if (res.result.data == 0) {
								console.log(1111111)
								// that.$refs.uToast.show({
								// 	title: '到底啦！',
								// 	type: 'success'
								// });
								uni.showToast({
									title: '到底啦！',
								})
								that.loadmoreStatus = '更多商家敬请期待！';
							} else if (res.result.data < 10) {
								// that.navTag[that.currentTag].storeList = that.navTag[that.currentTag].storeList.concat(
								// 	res.result.data);
								that.storeList = that.storeList.concat(res.result.data);
								// that.storeList = that.navTag[that.currentTag].storeList;
								// that.navTag[that.currentTag].page = that.navTag[that.currentTag].page + 1;
								that.page = that.page + 1;
								that.loadmoreStatus = '更多商家敬请期待！';
							} else {
								// that.navTag[that.currentTag].storeList = that.navTag[that.currentTag].storeList.concat(
								// 	res.result.data);
								that.storeList = that.storeList.concat(res.result.data);
								// that.storeList = that.navTag[that.currentTag].storeList;
								// that.navTag[that.currentTag].page = that.navTag[that.currentTag].page + 1;
								that.page = that.page + 1;
								that.loadmoreStatus = '下拉加载更多！';
							}
						})
						.catch(err => {
							uni.hideLoading();
							that.$refs.uToast.show({
								title: '网络错误！',
								type: 'error'
							});
						});
			
		},
	}
</script>

<style lang="scss">
	page{
		background: #C6211E;
	}
	.bgtop{
		width: 100%;
		position: absolute;
		top: 30rpx;
	}
	.select {
		position: absolute;
		top: 156rpx;
		left: 40rpx;
		z-index: 99999;
		.u-mode-light-error {
			background-color: transparent !important;
			color: #FFF !important;
			border: 0 !important;
			font-size: 24rpx;
			font-weight: 700;
		}
	
		image {
			position: absolute;
			bottom: 8rpx;
			width: 8rpx;
			height: 30rpx;
		}
	
		.remark {
			position: absolute;
			left: 22rpx;
			font-size: 18rpx !important;
			color: #FFF;
			white-space: nowrap;
		}
	
	}
	.container{
		position: absolute;
		top: 460rpx;
		// z-index: 9;
		// margin-top: 400rpx;
		padding: 0 24rpx;
		width: 100%;
			.tit{
				width: 60%;
				margin:50rpx 20% 20rpx 20%;
			}
			.card{
				width: 100%;
			}
		
	}
	.store-box {
		width: 100%;
		position: absolute;
		margin-top: -15rpx;
		.sort-box {
		
			display: flex;
			flex-direction: row;
	
			// margin-top: 24rpx;
			.item-box {
				margin-right: 32rpx;
	
				.tit {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
	
				.active {
					font-weight: bold;
				}
			}
		}
		.item-box {
			margin: 15rpx 48rpx 0 0;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 8rpx 12rpx rgba(0, 0, 0, 0.05);
		
			.top-box {
				display: flex;
				flex-direction: row;
				padding: 0 20rpx;
		
				.left {
					position: relative;
					margin-right: 20rpx;
					border-radius: 8rpx;
					overflow: hidden;
					height: 128rpx;
					width: 96rpx;
		
					image {
						width: 100%;
						height: 100%;
						// border-radius: 12rpx;
					}
		
					view {
						position: absolute;
						bottom: 0;
						width: 100%;
						height: 32rpx;
						font-size: 16rpx !important;
						line-height: 32rpx;
						text-align: center;
						background: linear-gradient(257.22deg, #FF4848 0%, #FF9900 100%);
						color: #fff;
					}
				}
		
				.right {
					flex: 1;
		
					.tit {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
						white-space: pre-wrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin: 0;
					}
		
					.justify-content {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
					}
		
					.row {
						font-size: 24rpx;
						color: #999999;
						margin-top: 8rpx;
		
						.mark-tag {
							width: 110rpx;
							height: 35rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 18rpx;
							color: #ff5c26;
							border-radius: 5rpx;
							white-space: nowrap;
							margin-right: 20rpx;
						}
		
						.row-left {
							display: flex;
							flex-direction: row;
							margin-top: 8rpx;
		
							.t1,
							i {
								color: #ffca3e;
							}
		
							text {
								position: relative;
								margin-right: 26rpx;
								font-size: 20rpx;
							}
		
							text:not(:last-child)::after {
								content: '';
								position: absolute;
								right: -22rpx;
								top: 8rpx;
								width: 2rpx;
								height: 16rpx;
								margin: 0 10rpx;
								background-color: #898989;
		
							}
						}
		
						.t2 {
							margin-left: 24rpx;
						}
		
						.row-right {
							display: flex;
							flex-direction: row;
		
							i {
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		
			.goods-box:last-child {
				margin-right: 24rpx;
			}
		
			.bottom-box {
				&-container {
					margin: 16rpx 0 0 0;
					padding-left: 134rpx;
					white-space: nowrap;
		
					.goods-box {
						width: 128rpx;
						margin-right: 20rpx;
						margin-left: 0 !important;
						display: inline-block;
		
						.img-box {
							position: relative;
							width: 128rpx;
							height: 128rpx;
							background-color: #f1f1f1;
							border-radius: 8rpx;
							overflow: hidden;
		
							image {
								width: 128rpx;
								height: 128rpx;
							}
		
							.tit {
								position: absolute;
								font-size: 16rpx;
								bottom: 0;
								width: 100%;
								height: 30rpx;
								text-align: center;
								line-height: 30rpx;
								color: #fff;
								background-color: rgba(0, 0, 0, 0.5);
								;
							}
		
							.tag {
								position: absolute;
								bottom: 0;
								left: 0;
								background-color: #ff5722;
								color: #ffffff;
								padding: 4rpx 8rpx;
								font-size: 24rpx;
								border-radius: 8rpx;
							}
						}
		
						.tit {
							font-size: 22rpx;
							color: #a6a6a6;
							margin-top: 8rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
		
						.price-box {
							margin-top: 8rpx;
		
							.txt1 {
								font-size: 18rpx;
								color: #000;
								font-weight: 700;
							}
		
							.txt2 {
								font-size: 24rpx;
								color: #000;
								font-weight: 700;
							}
		
							.txt3 {
								margin-left: 8rpx;
								font-size: 14rpx;
								color: #bbbbbb;
								text-decoration: line-through;
							}
						}
					}
		
					.goods-box:last-child {
						margin-right: 24rpx;
					}
				}
			}
		
			.avatarbox{
				background: linear-gradient(270deg, #FFFADE 44.21%, rgba(255, 250, 222, 0) 87.07%);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 40rpx;
				padding-left: 134rpx;
				// padding-right: 24rpx;
				margin-top: 16rpx;
				margin-right: 24rpx;
				.left{
					image{
						width: 32rpx;
						margin-right: 4rpx;
					}
				}
				.right{
					position: relative;
					height: 100%;
					background-color: #FFE8C1;
					// line-height: 40rpx;
					font-size: 20rpx;
					color: #d36413;
					display: flex;
					align-items: center;
					// margin-right: 24rpx;
					padding:0 24rpx;
					view{
						// line-height: 40rpx;
						font-size: 24rpx;
						font-weight: 700;
						color:#9E4C11;
						margin-right: 8rpx;
					}
					&::after{
						content: ' ';
						  position: absolute;
						  top: -40rpx;
						  left: -20px;
						  border-width: 40px 20rpx;
						  border-style: solid;
						  border-color:transparent transparent  #FFE8C1 transparent;
					}
				}
			}
		}
		
		.item-box:last-child {
			border-bottom: 0;
		}
		.rowTags {
			display: flex;
			flex-direction: row;
			margin-top: 18rpx !important;
			margin-left: 4rpx;
		
			view {
				border: 2rpx solid #FF6D4D;
				font-size: 16rpx;
				color: #FF6D4D;
				padding: 4rpx 6rpx;
				border-radius: 8rpx;
				margin-right: 10rpx;
				margin-left: 0 !important;
			}
		}
	}
</style>